<p-messages [value]="msgs" [closable]="false"></p-messages>
<p-confirmPopup></p-confirmPopup>
<div class="card">
  <div class="mycenter">
    <span>
      <h5>Single Column</h5>
    </span>
    <span>
      <button pButton type="button" class="mr-1" (click)="openDialog()">添加书籍</button>
    </span>
  </div>
  <p-table [value]="books">
    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="code">Id
          <p-sortIcon field="code"></p-sortIcon>
        </th>
        <th pSortableColumn="name">BookName
          <p-sortIcon field="name"></p-sortIcon>
        </th>
        <th pSortableColumn="price">Action
          <p-sortIcon field="price"></p-sortIcon>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-book>
      <tr>
        <td>{{book.bookId}}</td>
        <td>{{book.bookName}}</td>
        <td>
          <span *ngIf="isBorrow(book.bookId);else elseContent">
            <ng-container *ngTemplateOutlet="content"></ng-container>
          </span>
          <ng-template #content>
            <button pButton type="button" class="mr-1" [ngClass]="{'notSelect': bool}">待还</button>
            <button pButton type="button" class="p-button-danger" [ngClass]="{'notSelect': bool}">请先还书</button>
          </ng-template>
          <ng-template #elseContent>
            <button pButton type="button" class="mr-1" (click)="borrowBook(book.bookId)">借阅</button>
            <button pButton type="button" class="p-button-danger" (click)="deleteBook(book.bookId, $event)">Delete</button>

          </ng-template>
        </td>
      </tr>
    </ng-template>
  </p-table>
  <div class="Dia" *ngIf="showView">
    <h3>添加书籍</h3>
    <div class="input-wrapper">
      <i class="iconfont icon-search"></i> <!-- 输入框前面的图标 -->
      <input type="text" placeholder="请输入书籍名称" [(ngModel)]="book.bookName" (keydown.enter)="creat()"> <!-- 输入框 -->
    </div>
    <br>
    <button pButton type="button" class="mr-1" (click)="creat()">添加</button>
    <button pButton type="button" class="p-button-danger" (click)="closeDialog()">取消</button>
  </div>


</div>
